import { useState } from "react";
import { Button, Card, Tabs, Input, Select, Table, Space } from "antd";
import { BranchesOutlined, EllipsisOutlined } from "@ant-design/icons";
import BranchModal from "../BranchModal";
import styles from "./index.module.less";

interface BranchItem {
  key: string;
  name: string;
  lastCommit: string;
  creator: string;
  createdAt: string;
  baseBranch: string;
  pullRequest: number;
}

const Repository: React.FC = () => {
  const [branchModalVisible, setBranchModalVisible] = useState(false);
  const [activeTab, setActiveTab] = useState("1");

  const handleCreateBranch = (values: any) => {
    console.log("创建分支:", values);
    setBranchModalVisible(false);
  };

  const columns = [
    {
      title: "分支名称",
      dataIndex: "name",
      key: "name",
      render: (text: string) => (
        <div data-oid="jigpfyj">
          <div data-oid="m7t2ged">{text}</div>
          <div className={styles.description} data-oid="_cu3g2z">
            暂无描述
          </div>
        </div>
      ),
    },
    {
      title: "最近一次提交",
      dataIndex: "lastCommit",
      key: "lastCommit",
    },
    {
      title: "创建人",
      dataIndex: "creator",
      key: "creator",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "起始分支",
      dataIndex: "baseBranch",
      key: "baseBranch",
    },
    {
      title: "Pull Request",
      dataIndex: "pullRequest",
      key: "pullRequest",
    },
    {
      title: "操作",
      key: "action",
      render: () => (
        <Button
          icon={<EllipsisOutlined data-oid="hjml4gh" />}
          data-oid="b6:pl2z"
        />
      ),
    },
  ];

  const data: BranchItem[] = [
    {
      key: "1",
      name: "master",
      lastCommit: "默认分支",
      creator: "系统",
      createdAt: "2024-01-01",
      baseBranch: "master",
      pullRequest: 0,
    },
  ];

  const items = [
    {
      key: "1",
      label: "活跃分支 1",
    },
    {
      key: "2",
      label: "我的分支 0",
    },
    {
      key: "3",
      label: "全部分支 1",
    },
    {
      key: "4",
      label: "非活跃分支 0",
    },
  ];

  return (
    <div className={styles.container} data-oid="ts._82g">
      <div className={styles.header} data-oid="7pnmpo1">
        <h1 data-oid="okhg463">分支</h1>
        <Space data-oid="7z5vkk3">
          <Button
            type="primary"
            icon={<BranchesOutlined data-oid="0aqvlue" />}
            onClick={() => setBranchModalVisible(true)}
            data-oid="ts_i16_"
          >
            新建分支
          </Button>
          <Button data-oid="n38yp3e">分支对比</Button>
          <Button
            icon={<EllipsisOutlined data-oid="5c2d8a1" />}
            data-oid="z38:0t:"
          />
        </Space>
      </div>

      <Card data-oid="l7jh9lj">
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          items={items}
          className={styles.tabs}
          data-oid="4.sw9_x"
        />

        <div className={styles.searchBar} data-oid="3f6:2cy">
          <Input
            placeholder="搜索分支名称或描述"
            className={styles.searchInput}
            data-oid="_jgyn4g"
          />

          <Select
            placeholder="类型"
            className={styles.typeSelect}
            options={[
              { value: "all", label: "全部" },
              { value: "active", label: "活跃" },
              { value: "inactive", label: "非活跃" },
            ]}
            data-oid="ih01_8f"
          />
        </div>

        <Table
          columns={columns}
          dataSource={data}
          pagination={false}
          className={styles.table}
          data-oid="a6dl_ch"
        />
      </Card>

      <BranchModal
        visible={branchModalVisible}
        onCancel={() => setBranchModalVisible(false)}
        onSubmit={handleCreateBranch}
        data-oid="oysoiad"
      />
    </div>
  );
};

export default Repository;
